<template>
<div>
	<Card :bordered="false" dis-hover ref="editor">
		<!--end头部-->
		<div class="container page-wrap w1250">
			<!-- 条件筛选 start -->
			<div class="screen-box">
				<!-- 位置 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">位置：</dt>
					<dd>
						<a @click='searchBox("City", "")' :class='{active:search.City==""}'>不限</a>
						<a @click='searchBox("City", "410100")' :class='{active:search.City=="410100"}'>郑州市</a>
						<a @click='searchBox("City", "410200")' :class='{active:search.City=="410200"}'>开封市</a>
						<a @click='searchBox("City", "410300")' :class='{active:search.City=="410300"}'>洛阳市</a>
						<a @click='searchBox("City", "410400")' :class='{active:search.City=="410400"}'>平顶山市</a>
						<a @click='searchBox("City", "410500")' :class='{active:search.City=="410500"}'>安阳市</a>
						<a @click='searchBox("City", "410600")' :class='{active:search.City=="410600"}'>鹤壁市</a>
						<a @click='searchBox("City", "410700")' :class='{active:search.City=="410700"}'>新乡市</a>
						<a @click='searchBox("City", "410800")' :class='{active:search.City=="410800"}'>焦作市</a>
						<a @click='searchBox("City", "410900")' :class='{active:search.City=="410900"}'>濮阳市</a>
						<a @click='searchBox("City", "411000")' :class='{active:search.City=="411000"}'>许昌市</a>
						<a @click='searchBox("City", "411100")' :class='{active:search.City=="411100"}'>漯河市</a>
						<a @click='searchBox("City", "411200")' :class='{active:search.City=="411200"}'>三门峡市</a>
						<a @click='searchBox("City", "411300")' :class='{active:search.City=="411300"}'>南阳市</a>
						<a @click='searchBox("City", "411400")' :class='{active:search.City=="411400"}'>商丘市</a>
						<a @click='searchBox("City", "411500")' :class='{active:search.City=="411500"}'>信阳市</a>
						<a @click='searchBox("City", "411600")' :class='{active:search.City=="411600"}'>周口市</a>
						<a @click='searchBox("City", "411700")' :class='{active:search.City=="411700"}'>驻马店市</a>
						<a @click='searchBox("City", "419001")' :class='{active:search.City=="419001"}'>济源市</a>
					</dd>
				</dl>
				<!-- 存储标准 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">存储标准：</dt>
					<dd>
						<a @click='searchBox("StorageType", "")' :class='{active:search.StorageType==""}'>不限</a>
						<a @click='searchBox("StorageType", "01")' :class='{active:search.StorageType=="01"}'>普通仓</a>
						<a @click='searchBox("StorageType", "02")' :class='{active:search.StorageType=="02"}'>恒温仓</a>
						<a @click='searchBox("StorageType", "03")' :class='{active:search.StorageType=="03"}'>冷藏仓</a>
						<a @click='searchBox("StorageType", "04")' :class='{active:search.StorageType=="04"}'>冷冻仓</a>
						<a @click='searchBox("StorageType", "05")' :class='{active:search.StorageType=="05"}'>多温仓</a>
						<a @click='searchBox("StorageType", "06")' :class='{active:search.StorageType=="06"}'>露天堆场</a>
						<a @click='searchBox("StorageType", "07")' :class='{active:search.StorageType=="07"}'>有棚堆场</a>
						<a @click='searchBox("StorageType", "08")' :class='{active:search.StorageType=="08"}'>危化品库</a>
						<a @click='searchBox("StorageType", "09")' :class='{active:search.StorageType=="09"}'>医药库</a>
						<a @click='searchBox("StorageType", "10")' :class='{active:search.StorageType=="10"}'>其他</a>
					</dd>
				</dl>
				<!-- 类型 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">类型：</dt>
					<dd>
						<a @click='searchBox("WareHouseType", "")' :class='{active:search.WareHouseType==""}'>不限</a>
						<a @click='searchBox("WareHouseType", "01")' :class='{active:search.WareHouseType=="01"}'>平库</a>
						<a @click='searchBox("WareHouseType", "02")' :class='{active:search.WareHouseType=="02"}'>高台库</a>
						<a @click='searchBox("WareHouseType", "03")' :class='{active:search.WareHouseType=="03"}'>楼库</a>
						<a @click='searchBox("WareHouseType", "04")' :class='{active:search.WareHouseType=="04"}'>地下仓库</a>
						<a @click='searchBox("WareHouseType", "05")' :class='{active:search.WareHouseType=="05"}'>立体库</a>
						<a @click='searchBox("WareHouseType", "06")' :class='{active:search.WareHouseType=="06"}'>坡道库</a>
						<a @click='searchBox("WareHouseType", "07")' :class='{active:search.WareHouseType=="07"}'>气体库</a>
					</dd>
				</dl>
				<!-- 面积 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">面积：</dt>
					<dd>
						<a @click='searchBox("TotalAreaAge", "")' :class='{active:search.TotalAreaAge==""}'>不限</a>
						<a @click='searchBox("TotalAreaAge", "1")' :class='{active:search.TotalAreaAge=="1"}'>≤1000平米</a>
						<a @click='searchBox("TotalAreaAge", "2")' :class='{active:search.TotalAreaAge=="2"}'>1000-5000平米</a>
						<a @click='searchBox("TotalAreaAge", "3")' :class='{active:search.TotalAreaAge=="3"}'>5000-10000平米</a>
						<a @click='searchBox("TotalAreaAge", "4")' :class='{active:search.TotalAreaAge=="4"}'>10000-20000平米</a>
						<a @click='searchBox("TotalAreaAge", "5")' :class='{active:search.TotalAreaAge=="5"}'>≥20000平米</a>
					</dd>
				</dl>
				<!-- 月台 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">月台：</dt>
					<dd>
						<a @click='searchBox("Platform", "")' :class='{active:search.Platform==""}'>不限</a>
						<a @click='searchBox("Platform", "1")' :class='{active:search.Platform=="1"}'>无月台</a>
						<a @click='searchBox("Platform", "2")' :class='{active:search.Platform=="2"}'>单面月台</a>
						<a @click='searchBox("Platform", "3")' :class='{active:search.Platform=="3"}'>双面月台</a>
						<a @click='searchBox("Platform", "4")' :class='{active:search.Platform=="4"}'>更多面月台</a>
					</dd>
				</dl>
				<!-- 消防 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">消防：</dt>
					<dd>
						<a @click='searchBox("FireFighting", "")' :class='{active:search.FireFighting==""}'>不限</a>
						<a @click='searchBox("FireFighting", "1")' :class='{active:search.FireFighting=="1"}'>无</a>
						<a @click='searchBox("FireFighting", "2")' :class='{active:search.FireFighting=="2"}'>甲类</a>
						<a @click='searchBox("FireFighting", "3")' :class='{active:search.FireFighting=="3"}'>乙类</a>
						<a @click='searchBox("FireFighting", "4")' :class='{active:search.FireFighting=="4"}'>丙类</a>
						<a @click='searchBox("FireFighting", "5")' :class='{active:search.FireFighting=="5"}'>丁类</a>
						<a @click='searchBox("FireFighting", "6")' :class='{active:search.FireFighting=="6"}'>戊类</a>
						<a @click='searchBox("FireFighting", "7")' :class='{active:search.FireFighting=="7"}'>正在办理</a>
					</dd>
				</dl>
				<!-- 结构 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">结构：</dt>
					<dd>
						<a @click='searchBox("BuildingStructure", "")' :class='{active:search.BuildingStructure==""}'>不限</a>
						<a @click='searchBox("BuildingStructure", "1")' :class='{active:search.BuildingStructure=="1"}'>砖瓦混合</a>
						<a @click='searchBox("BuildingStructure", "2")' :class='{active:search.BuildingStructure=="2"}'>轻钢结构</a>
						<a @click='searchBox("BuildingStructure", "3")' :class='{active:search.BuildingStructure=="3"}'>重钢结构</a>
						<a @click='searchBox("BuildingStructure", "4")' :class='{active:search.BuildingStructure=="4"}'>钢混结构</a>
					</dd>
				</dl>
				<!-- 层高 -->
				<dl class="screen-box-list displayflex" :class='{"hidden":state}'>
					<dt class="flexitem">层高：</dt>
					<dd>
						<a @click='searchBox("FloorHeight", "")' :class='{active:search.FloorHeight==""}'>不限</a>
						<a @click='searchBox("FloorHeight", "1")' :class='{active:search.FloorHeight=="1"}'>6米以下</a>
						<a @click='searchBox("FloorHeight", "2")' :class='{active:search.FloorHeight=="2"}'>6-9米</a>
						<a @click='searchBox("FloorHeight", "3")' :class='{active:search.FloorHeight=="3"}'>9-12米</a>
						<a @click='searchBox("FloorHeight", "4")' :class='{active:search.FloorHeight=="4"}'>12米以上</a>
					</dd>
				</dl>
				<!-- 租金 -->
				<dl class="screen-box-list displayflex">
					<dt class="flexitem">租金：</dt>
					<dd>
						<a @click='searchBox("LeasingPrice", "")' :class='{active:search.LeasingPrice==""}'>不限</a>
						<a @click='searchBox("LeasingPrice", "1")' :class='{active:search.LeasingPrice=="1"}'>≤15元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "2")' :class='{active:search.LeasingPrice=="2"}'>15-20元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "3")' :class='{active:search.LeasingPrice=="3"}'>20-25元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "4")' :class='{active:search.LeasingPrice=="4"}'>25-30元/㎡/月</a>
						<a @click='searchBox("LeasingPrice", "5")' :class='{active:search.LeasingPrice=="5"}'>≥30元/㎡/月</a>
					</dd>
				</dl>
				<div class="text-center">
					<a class="screen-btn" @click='state=!state'>更多选项（月台、消防、建筑类型、层高等） <i class="iconfont icon-expand" :class='{"hidden":!state}'></i></a>
				</div>
			</div>
			<!-- 排序 start -->
			<div class="page-title">
				<h2 class="data-record">当前共有<b>{{search.total}}</b>条仓库信息</h2>
				<!-- <div class="btn-group flexitem">
					<a href="javascript:;" class="active">截止日期<i class="iconfont icon-arrow-lower"></i></a>
					<a href="javascript:;">剩余天数<i class="iconfont icon-arrow-lower"></i></a>
					<a href="javascript:;">仓库所在地<i class="iconfont icon-arrow-lower"></i></a>
				</div> -->
			</div>
			<!-- 列表 start -->
			<div class="demand-list-wrap">
				<dl class="demand-list" v-for='item in list'>
					<dt class="demand-list-title displayflex">
						<h3 class="flex1"><b>【{{item.DemandServices}}】</b>{{item.Venue}} 求租{{item.TotalAreaAge}}平米 {{item.StorageType | StorageType}}</h3>
						<span>不超过  <strong>{{item.LeasingPrice}}元/㎡/月</strong></span>
					</dt>
					<dd class="demand-list-content">
						<div class="demand-text">
							<p>
								<span>需求服务：{{item.DemandServices}}</span>
								<span>预计租期：{{item.PlanLeasePeriod}}个月</span>
								<span>截止日期：{{item.DeadLine | getYMD}}</span>
							</p>
							<p>货物范围：{{item.GoodsCategory | GoodsCategory}}</p>
							<p>发布于 {{item.CREATE_TIME | getYMD}} {{item.CREATE_TIME | getHMS}}</p>
						</div>
						<div class="demand-state">
							<b>求租中</b>
							<!-- <span>报价剩余<strong>115</strong>天</span> -->
						</div>
						<div class="recommend-text-btn fr" style="margin-top: -40px;">
							<div class="btn-group flex1" style="margin-bottom: 5px;">
								<a href="qq:59907980"><i class="iconfont icon-tel"></i>联系方式</a>
							</div>
							<br>
							<div class="btn-group flex1 ">
								<a href="javascript:;" @click='detailGo(item.GUID)'><i class="iconfont icon-search" ></i>查看详情</a>
							</div>
						</div>
					</dd>
				</dl>
			</div>
			<!-- 页码 -->
			<Page show-total :page-size="search.pageSize" :current="search.PageIndex" :total="search.total" @on-change="changePage"></Page>
			<!-- 推荐需求 -->
			<div class="related-demand">
				<div class="related-tit">
					<h2>推荐需求</h2>
					<!-- <a href="javascript:;"><i class="iconfont icon-head-refresh"></i>换一批</a> -->
				</div>
				<ul class="index-demand-content">
					<li v-for='item in recommends'>
						<h3>{{item.Venue}}{{item.DemandServices}}{{item.TotalAreaAge}} {{item.StorageType | StorageType}}</h3>
						<p>需求服务：{{item.DemandServices}}</p>
						<p>预计租期：{{item.PlanLeasePeriod}}个月</p>
						<p>存放货物：{{item.GoodsCategory | GoodsCategory}}</p>
						<div class="demand-btn">
							<a href="javascript:;" @click='detailGo(item.GUID)'><i class="iconfont icon-search" ></i>查看详情</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</Card>
</div>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			recommends: [],
			search: {
				Province: "410000",
				City: "",
				StorageType: "",
				WareHouseType: "",
				Platform: "",
				FireFighting: "",
				BuildingStructure: "",
				LeasingPrice: "",
				TotalAreaAge: "",
				minFloorHeight: 0,
				maxFloorHeight: 0,
				IsPublish: "Y",
				PageIndex: 1,
				pageSize: 10,
				total: 0,
				page: 1
			},
			state: true
		};
	},
	mounted() {
		let self = this;

		this.axios
			.post("/api/requirement/search", {
				Province: "410000",
				IsPublish: "Y",
				PageIndex: 1,
				PageSize: 4
			})
			.then(function(res) {
				self.recommends = res.datas;
			});
	},
	methods: {
		getData: function() {
			var self = this;
			if (self.search.FloorHeight == "") {
				self.search.minFloorHeight = 0;
				self.search.maxFloorHeight = "";
			} else if (self.search.FloorHeight == "1") {
				self.search.minFloorHeight = 0;
				self.search.maxFloorHeight = 6;
			} else if (self.search.FloorHeight == "2") {
				self.search.minFloorHeight = 6;
				self.search.maxFloorHeight = 9;
			} else if (self.search.FloorHeight == "3") {
				self.search.minFloorHeight = 9;
				self.search.maxFloorHeight = 12;
			} else if (self.search.FloorHeight == "4") {
				self.search.minFloorHeight = 12;
				self.search.maxFloorHeight = "";
			} else if (self.search.TotalAreaAge == "") {
				self.search.minTotalAreaAge = 0;
				self.search.maxTotalAreaAge = "";
			} else if (self.search.TotalAreaAge == "1") {
				self.search.minTotalAreaAge = 0;
				self.search.maxTotalAreaAge = 1000;
			} else if (self.search.TotalAreaAge == "2") {
				self.search.minTotalAreaAge = 1000;
				self.search.maxTotalAreaAge = 5000;
			} else if (self.search.TotalAreaAge == "3") {
				self.search.minTotalAreaAge = 5000;
				self.search.maxTotalAreaAge = 10000;
			} else if (self.search.TotalAreaAge == "4") {
				self.search.minTotalAreaAge = 10000;
				self.search.maxTotalAreaAge = 20000;
			} else if (self.search.TotalAreaAge == "5") {
				self.search.minTotalAreaAge = 20000;
				self.search.maxTotalAreaAge = "";
			} else if (self.search.LeasingPrice == "1") {
				self.search.minLeasingPrice = 0;
				self.search.maxLeasingPrice = 15;
			} else if (self.search.LeasingPrice == "2") {
				self.search.minLeasingPrice = 15;
				self.search.maxLeasingPrice = 20;
			} else if (self.search.LeasingPrice == "3") {
				self.search.minLeasingPrice = 20;
				self.search.maxLeasingPrice = 25;
			} else if (self.search.LeasingPrice == "4") {
				self.search.minLeasingPrice = 25;
				self.search.maxLeasingPrice = 30;
			} else if (self.search.LeasingPrice == "5") {
				self.search.minLeasingPrice = 30;
				self.search.maxLeasingPrice = "";
			}

			this.axios
				.post("/api/requirement/search", self.search)
				.then(function(res) {
					self.list = res.datas;
					self.search.total = res.total;
				});
		},
		detailGo: function(GUID) {
			this.$router.push(`/front/demandDetail/${GUID}`);
		},
		changePage(pageNum) {
			this.search.PageIndex = pageNum;
			this.getData();
		},
		searchBox: function(propName, value) {
			this.search[propName] = value;
			this.getData();
		}
	},
	created() {
		this.search.City = this.$route.query.City;
		this.search.TotalAreaAge = this.$route.query.TotalAreaAge;
		this.search.WareHouseType = this.$route.query.WareHouseType;

		this.getData();
	},
	activated() {
		this.created();
	}
};
</script>